<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true">
				<el-form-item label="属性名称：">
					<el-input v-model="viewForm.type"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSerch" icon="search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleReset" icon="circle-close">重置</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd" icon="plus">录入</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="rows" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;" id="id" border height="444">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="name" label="属性名称" width="180" sortable>
			</el-table-column>
			<el-table-column prop="value" label="属性内容" width="180" sortable>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="200">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<!-- <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
      </el-pagination> -->
			<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="totals" style="float:right;">
			</el-pagination>
		</el-col>
		<el-dialog title="上传图片" v-model="showUpload" :close-on-click-modal="false">
			<el-upload class="upload-demo" action="http://120.77.207.47:8080/api/attachMentController/uploadAttachMent.do" :data="uploadForm" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList2" list-type="picture">
				<el-button size="small" type="primary">点击上传</el-button>
				<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
			</el-upload>
		</el-dialog>
		<!--录入界面-->
		<el-dialog title="录入" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addrules" ref="addForm">
				<el-form-item label="规格名称" prop="name" :label-width="formLabelWidth">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="规格内容" prop="value" :label-width="formLabelWidth">
					<!--<el-input v-model="addForm.value" type="textarea" :rows="6" auto-complete="off"></el-input>-->
					<el-tag :key="tag" v-for="tag in dynamicTags" :closable="true" :close-transition="false" @close="handleClose(tag)">
						{{tag}}
					</el-tag>
					<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
					</el-input>
					<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editrules" ref="editForm">
				<el-form-item label="规格名称" prop="name" :label-width="formLabelWidth">
					<el-input v-model="editForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="规格内容" prop="value" :label-width="formLabelWidth">
					<el-tag :key="tag" v-for="tag in dynamicTags" :closable="true" :close-transition="false" @close="handleClose(tag)">
						{{tag}}
					</el-tag>
					<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
					</el-input>
					<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

	</section>
</template>
<script>
	import { list, save, update, del } from '../../api/paraAttr';
	export default {
		data() {
			return {
				dynamicTags: [],
				inputVisible: false,
				inputValue: '',
				uploadForm: {
					id: "",
					token: "8a8ab0b246dc81120146dc8181950052_461421854532308992",
				},
				fileList2: [],
				showUpload: false,
				isHot: '',
				sels: '',
				rows: [],
				// total: 0,
				listLoading: false,
				page: 1,
				// num:10,
				totals: 0,
				size: 10,
				currentPage: 1,
				isShow: false,
				addFormVisible: false, //录入界面是否显示
				addLoading: false,
				//录入界面数据
				addForm: {
					type: 2,
				},
				addrules: {
					carNumber: [{
						required: true,
						message: '请输入正确车牌号',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请输入车辆类型',
						trigger: 'blur'
					}],
				},
				editFormVisible: false, //编辑界面是否显示
				editLoading: false,
				//编辑界面数据
				editForm: {},
				editrules: {
					carnumber: [{
						required: true,
						message: '请输入正确车牌号',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请输入车辆类型',
						trigger: 'blur'
					}],
				},
				viewFormVisible: false, //查看界面是否显示
				viewLoading: false,
				//查看界面数据
				viewForm: {
					type: '',
					carNumber: '',
					departName: ''
				},
				formLabelWidth: "100px",
			};
		},
		components: {

		},
		methods: {
			handleClose(tag) {
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},

			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});
			},

			handleInputConfirm() {
				let inputValue = this.inputValue;
				if(inputValue) {
					this.dynamicTags.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
			},
			showUploadDialog(id) {
				this.fileList2 = [];
				this.uploadForm.id = id;
				this.showUpload = true;
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			//列表切换列表页
			handleCurrentChange(val) {
				this.currentPage = val;
				if(this.treeSelect.departId == null) {
					this.getList();
				} else {
					this.handleSerch();
				};

			},
			//列表切换显示条数
			handleSizeChange(val) {
				this.size = val;
				if(this.treeSelect.departId == null) {
					this.getList();
				} else {
					this.handleSerch();
				};
			},
			getSelectDepart(id) {
				this.treeSelect.departId = id;
			},
			//点击节点选中节点数据
			handleNodeClick(data, node) {
				this.treeSelect.departId = data.id;
				this.treeSelect.depart = data.name;
				this.isShow = !this.isShow;
			},
			//初始化
			// getTabData(){
			//   var params={departId:this.treeSelect.departId};
			//   getSubTypes(params).then(res => {
			//     this.subType=res.data;
			//     this.checkList=res.data;
			//   });
			// },
			//查询
			handleSerch: function() {
				// var paras = this.treeSelect.departId;
				// alert(paras);
				let para = {
					page: this.currentPage,
					rows: this.size,
					field: "carNumber,createBy,departName,type,id",
					departId: this.treeSelect.departId
					// departId: this.departnum,
					// row:this.row,
					//          name: this.item.value
				};
				console.log(para);
				// this.listLoading = true;
				getListList(para).then((res) => {
					// console.log(res);         
					this.rows = res.obj;
					this.totals = Number(res.total);
					// console.log(this.total);
					// this.listLoading = false;
				});

			},
			// 重置
			handleReset: function() {
				this.treeSelect.depart = null;
				this.treeSelect.departId = null;
				this.getList();
			},
			// 模板下载
			// handleDload:function () {
			//    updateCars().then(()=>{
			//       alert("下载成功")
			//   });
			//   updateCars();
			// },
			selsChange: function(sels) {
				this.sels = sels;
			},
			// handleCurrentChange(val) {
			//   this.page = val;
			//   this.getList();
			// },
			//获取车辆列表
			getList() {
				let para = {
					page: this.currentPage,
					rows: this.size,
					type: 2,
				};
				// console.log(para);
				this.listLoading = true;
				list(para).then((res) => {
					// console.log(res);         
					this.rows = res.obj;
					this.totals = Number(res.total);
					// console.log(this.total);
					this.listLoading = false;
				});
			},
			//显示录入界面
			handleAdd: function() {
				this.addFormVisible = true;
				this.dynamicTags = [];
				this.addForm = {
					type: 2,
				};
			},
			//录入
			addSubmit: function() {
				let that = this;
				this.$refs.addForm.validate((valid) => {
					if(valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							let para = Object.assign({}, this.addForm);
							para.value = that.dynamicTags.join(";");
							save(para).then((res) => {
								// console.log(res);
								// this.rows = res.rows;
								// this.total = Number(res.total);
								// this.getList();
								this.addLoading = false;
								// this.$notify({
								//   title: '成功',
								//   message: '提交成功',
								//   type: 'success'
								// });
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getList();
							});
						});
					}
				});
			},
			//显示编辑界面
			handleEdit: function(index, row) {
				// console.log(scope);
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
				this.dynamicTags = this.editForm.value.split(";");
			},
			//显示查看界面
			handleView: function(index, row) {
				this.viewFormVisible = true;
				this.viewForm = Object.assign({}, row);
			},
			//      编辑
			editSubmit: function() {
				this.$refs.editForm.validate((valid) => {
					if(valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							let para = Object.assign({}, this.editForm);
							para.value = that.dynamicTags.join(";");
							update(para).then((res) => {
								this.editLoading = false;
								// this.$notify({
								//   title: '成功',
								//   message: '提交成功',
								//   type: 'success'
								// });
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getList();
							});
						});
					}
				});
			},

			//删除
			handleDel: function(index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = {
						id: row.id
					};
					del(para).then((res) => {
						this.listLoading = false;
						// this.$notify({
						//   title: '成功',
						//   message: '删除成功',
						//   type: 'success'
						// });
						this.getList();
					});
				}).catch(() => {

				});
			},
			//批量删除
			batchRemove: function() {
				var ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = {
						ids: ids
					};
					batchRemoveCars(para).then((res) => {
						this.listLoading = false;
						// this.$notify({
						//   title: '成功',
						//   message: '删除成功',
						//   type: 'success'
						// });
						this.getList();
					});
				}).catch(() => {

				});
			},

		},
		activated: function() {
			this.getList();

		}

	};
</script>
<style scoped>
	.hid {
		margin: 0px;
	}
	
	div {
		display: hidden;
	}
	
	td {
		display: hidden;
	}
	
	.box-tree {
		position: absolute;
		overflow: auto;
		z-index: 100;
		width: 100%;
	}
	
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.el-tag{
		margin-right: 5px;
	}
</style>